<template>
  <div class="demo-page">
    <div class="demo-header">
      <h1 class="demo-title">图表组件演示</h1>
      <p class="demo-subtitle">展示各种图表类型和配置选项</p>
    </div>
    
    <div class="demo-content">
      <ChartDemo />
    </div>

    <div class="demo-content sales-trend-demo">
      <h2>销售趋势数据测试</h2>
      <div class="control-panel">
        <label for="days-select">选择天数：</label>
        <select id="days-select" v-model="selectedDays">
          <option value="7">7天</option>
          <option value="15">15天</option>
          <option value="30">30天</option>
        </select>
        <button @click="generateData">生成数据</button>
      </div>
      
      <div v-if="salesData.length > 0">
        <div class="chart-container">
          <apexchart
            type="area"
            height="300"
            :options="salesChartOptions"
            :series="salesChartSeries"
          ></apexchart>
        </div>
        
        <div class="data-preview">
          <h3>数据预览</h3>
          <div class="data-table-container">
            <table class="data-table">
              <thead>
                <tr>
                  <th>日期</th>
                  <th>销售额</th>
                  <th>订单数</th>
                  <th>销售额增长</th>
                  <th>订单数增长</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in salesData" :key="index">
                  <td>{{ item.date }}</td>
                  <td>{{ item.sales }}</td>
                  <td>{{ item.orders }}</td>
                  <td :class="getGrowthClass(item.salesGrowth)">{{ item.salesGrowth }}%</td>
                  <td :class="getGrowthClass(item.ordersGrowth)">{{ item.ordersGrowth }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 商户数据测试部分 -->
    <div class="demo-content merchant-data-demo">
      <h2>商户数据生成测试</h2>
      <div class="control-panel">
        <label for="merchant-count">商户数量：</label>
        <select id="merchant-count" v-model="merchantCount">
          <option value="5">5个</option>
          <option value="10">10个</option>
          <option value="20">20个</option>
        </select>
        <button @click="generateMerchantTestData">生成商户数据</button>
      </div>
      
      <div v-if="merchantData.length > 0">
        <div class="data-preview">
          <h3>商户数据预览</h3>
          <div class="data-table-container">
            <table class="data-table">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>类别</th>
                  <th>评分</th>
                  <th>交易量</th>
                  <th>订单数</th>
                  <th>状态</th>
                  <th>联系人</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in merchantData" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.category }}</td>
                  <td>{{ item.rating }}★</td>
                  <td>{{ item.transactionVolume.toLocaleString() }}</td>
                  <td>{{ item.orderCount }}</td>
                  <td>
                    <span :class="getStatusClass(item.status)">
                      {{ statusText(item.status) }}
                    </span>
                  </td>
                  <td>{{ item.contactPerson }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 商户详情 -->
          <div v-if="selectedMerchant" class="merchant-detail">
            <h3>选中商户详情</h3>
            <div class="merchant-detail-content">
              <div class="merchant-header">
                <div class="merchant-logo" v-if="selectedMerchant.logo">
                  <img :src="selectedMerchant.logo" :alt="selectedMerchant.name">
                </div>
                <div class="merchant-basic-info">
                  <h4>{{ selectedMerchant.name }}</h4>
                  <p>{{ selectedMerchant.description }}</p>
                </div>
              </div>
              <div class="merchant-info-grid">
                <div class="info-item">
                  <span class="info-label">创建时间</span>
                  <span class="info-value">{{ selectedMerchant.createTime }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">联系人</span>
                  <span class="info-value">{{ selectedMerchant.contactPerson }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">联系电话</span>
                  <span class="info-value">{{ selectedMerchant.contactPhone }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">电子邮箱</span>
                  <span class="info-value">{{ selectedMerchant.email }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">地址</span>
                  <span class="info-value">{{ selectedMerchant.address }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="demo-container">
      <h1>商户产品数据生成函数测试</h1>
      
      <div class="controls">
        <div class="form-group">
          <label for="merchantId">商户ID</label>
          <input id="merchantId" v-model="merchantId" placeholder="输入商户ID" />
        </div>
        
        <div class="form-group">
          <label for="count">产品数量</label>
          <input id="count" type="number" v-model="count" min="1" max="50" />
        </div>
        
        <button @click="generateProducts">生成产品数据</button>
      </div>
      
      <div v-if="products.length > 0" class="results">
        <h2>生成的产品数据 (总计: {{ products.length }})</h2>
        
        <div class="products-grid">
          <div v-for="product in products" :key="product.id" class="product-card">
            <div class="product-image">
              <img :src="product.image" :alt="product.name" />
            </div>
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <div class="product-price">
                <span class="original">¥{{ product.originalPrice }}</span>
                <span v-if="product.discountPrice" class="discount">¥{{ product.discountPrice }}</span>
              </div>
              <div class="product-category">类别: {{ product.category }}</div>
              <div class="product-status" :class="product.status">
                状态: {{ product.status === 'active' ? '上架' : '下架' }}
              </div>
              <div class="product-stock">库存: {{ product.stock }}</div>
              <div class="product-sales">销量: {{ product.salesCount }}</div>
              <div class="product-date">创建时间: {{ product.createTime }}</div>
              <div class="product-description">{{ product.description }}</div>
            </div>
          </div>
        </div>
        
        <pre class="json-output">{{ JSON.stringify(products, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import ChartDemo from '@/components/admin/charts/ChartDemo.vue';
import { generateSalesTrendData, generateMerchantData, generateMerchantProductsData } from '@/utils/adminMock';

const selectedDays = ref(7);
const salesData = ref<any[]>([]);

// 商户数据测试相关
const merchantCount = ref(5);
const merchantData = ref<any[]>([]);
const selectedMerchant = ref<any>(null);

// 测试参数
const merchantId = ref('merchant_123');
const count = ref(10);
const products = ref<any[]>([]);

// 初始生成数据
salesData.value = generateSalesTrendData(selectedDays.value);

// 生成新数据
const generateData = () => {
  salesData.value = generateSalesTrendData(Number(selectedDays.value));
};

// 生成商户测试数据
const generateMerchantTestData = () => {
  merchantData.value = generateMerchantData(Number(merchantCount.value));
  // 设置第一个商户为默认选中
  if (merchantData.value.length > 0) {
    selectedMerchant.value = merchantData.value[0];
  }
};

// 生成产品数据
const generateProducts = () => {
  if (!merchantId.value) {
    alert('请输入商户ID');
    return;
  }
  
  if (count.value < 1 || count.value > 50) {
    alert('产品数量应在1-50之间');
    return;
  }
  
  products.value = generateMerchantProductsData(merchantId.value, count.value);
};

// 商户状态对应的文本
const statusText = (status: string) => {
  const map: {[key: string]: string} = {
    'active': '活跃',
    'inactive': '停用',
    'pending': '待审核'
  };
  return map[status] || status;
};

// 商户状态对应的样式
const getStatusClass = (status: string) => {
  switch (status) {
    case 'active': return 'status-active';
    case 'inactive': return 'status-inactive';
    case 'pending': return 'status-pending';
    default: return '';
  }
};

// 图表配置
const salesChartOptions = computed(() => ({
  chart: {
    type: 'area',
    toolbar: {
      show: true,
      tools: {
        download: true,
        selection: true,
        zoom: true,
        zoomin: true,
        zoomout: true,
        pan: true,
        reset: true
      }
    },
  },
  colors: ['#5e72e4', '#2dce89'],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'smooth',
    width: 2
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.2,
    }
  },
  xaxis: {
    categories: salesData.value.map(item => item.date),
    labels: {
      rotate: -45,
      rotateAlways: false
    }
  },
  yaxis: [
    {
      title: {
        text: '销售额'
      }
    },
    {
      opposite: true,
      title: {
        text: '订单数'
      }
    }
  ],
  tooltip: {
    y: {
      formatter: function (val: number, opts: any) {
        return opts.seriesIndex === 0 ? `${val} USDT` : `${val} 订单`;
      }
    }
  },
  legend: {
    position: 'top'
  }
}));

const salesChartSeries = computed(() => [
  {
    name: '销售额',
    data: salesData.value.map(item => item.sales)
  },
  {
    name: '订单数',
    data: salesData.value.map(item => item.orders)
  }
]);

// 根据增长率决定样式
const getGrowthClass = (growth: number) => {
  if (growth > 0) return 'positive-growth';
  if (growth < 0) return 'negative-growth';
  return '';
};
</script>

<style scoped>
.demo-page {
  padding: 20px;
}

.demo-header {
  margin-bottom: 24px;
}

.demo-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.demo-subtitle {
  font-size: 14px;
  color: #666;
  margin: 8px 0 0 0;
}

.demo-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.sales-trend-demo h2,
.merchant-data-demo h2 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 20px;
}

.control-panel {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.control-panel label {
  margin-right: 8px;
}

.control-panel select {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-right: 12px;
}

.control-panel button {
  padding: 6px 12px;
  background-color: #5e72e4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.control-panel button:hover {
  background-color: #4e60c7;
}

.chart-container {
  margin-bottom: 20px;
}

.data-preview h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.data-table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  font-weight: 600;
  color: #555;
  background-color: #f5f7fa;
}

.positive-growth {
  color: #2dce89;
}

.negative-growth {
  color: #f5365c;
}

/* 商户状态样式 */
.status-active {
  color: #2dce89;
  font-weight: 500;
}

.status-inactive {
  color: #f5365c;
  font-weight: 500;
}

.status-pending {
  color: #fb6340;
  font-weight: 500;
}

/* 商户详情样式 */
.merchant-detail {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.merchant-detail h3 {
  font-size: 16px;
  margin-bottom: 16px;
}

.merchant-header {
  display: flex;
  margin-bottom: 20px;
  gap: 16px;
}

.merchant-logo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.merchant-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merchant-basic-info h4 {
  font-size: 18px;
  margin: 0 0 8px 0;
}

.merchant-basic-info p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.merchant-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.demo-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1, h2 {
  margin-bottom: 20px;
}

.controls {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  align-items: flex-end;
}

.form-group {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.results {
  margin-top: 30px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.product-price {
  margin-bottom: 8px;
}

.original {
  font-weight: bold;
}

.discount {
  color: #e53935;
  font-weight: bold;
  margin-left: 10px;
}

.product-category, .product-status, .product-stock, .product-sales, .product-date {
  margin-bottom: 5px;
  font-size: 0.9em;
}

.product-status.active {
  color: #4CAF50;
}

.product-status.inactive {
  color: #e53935;
}

.product-description {
  margin-top: 10px;
  font-size: 0.9em;
  color: #666;
}

.json-output {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow: auto;
  max-height: 400px;
  font-size: 12px;
}
</style> 
 